<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>祝你圣诞快乐</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      position: relative;
    }

    h2,
    .star {
      visibility: hidden;
    }

    .mask {
      z-index: 3;
      display: flex;
      width: 100vw;
      height: 100vh;
      position: absolute;
      align-items: center;
      justify-content: center;
      background: #e65f5f;
    }

    button {
      color: white;
      font-size: 14px;
      padding: 10px 20px;
      border: 1px solid white;
      background: transparent;
      border-radius: 3px;
    }

    .hide {
      display: none;
    }

    .preview {
      height: 60vh;
    }

    .code-wrapper {
      height: 40vh;
      overflow: auto;
      position: relative;
      padding: 10px;
    }


    @keyframes blink {
      from {
        opacity: 1.0;
      }

      to {
        opacity: 0.0;
      }
    }
  </style>
  <link rel="stylesheet" href="./prism.css">
  <style id="styleTag"></style>
</head>

<body>
  <div class="mask"><button>请开始你的表演</button></div>
  <div class="preview">
    <h2>祝你圣诞快乐</h2>
    <div class="santa">
      <div class="hat">
        <div class="hat-top">
          <div class="ball"></div>
        </div>
        <div class="hat-side"></div>
      </div>
      <div class="head">
        <div class="face">
          <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
          </div>
        </div>
        <div class="left-ear ear"></div>
        <div class="right-ear ear"></div>
        <div class="beard">
          <div class="mouseAndNose">
            <div class="nose"></div>
            <div class="mouse">
              <div class="mouseLeft"></div>
              <div class="mouseRight"></div>
            </div>
          </div>
          <div class="beard1"></div>
          <div class="beard2"></div>
          <div class="beard3"></div>
          <div class="beard4"></div>
        </div>
      </div>
      <div class="clothe">
        <div class="left-hand"></div>
        <div class="right-hand"></div>
        <div class="line1 line"></div>
        <div class="line2 line"></div>
      </div>
    </div>
    <span class="star star1">✨</span>
    <span class="star star2">✨</span>
    <span class="star star3">✨</span>
    <span class="star star4">✨</span>
    <span class="star star5">✨</span>
    <span class="star star6">✨</span>
  </div>
  <div class="code-wrapper">
    <pre id="code"></pre>
  </div>
  <audio preload loop="loop" id="player" src="./Christmas.mp3"></audio>
  <script src="./prism.js"></script>
  <script src="./index.js"></script>
</body>

</html>
